<template>
  <section id="select-popUp" ref="popUpEl">
    <div class="popUp-header">
      <h2>事件详细信息</h2>
      <el-icon @click="closePopUp">
        <Close />
      </el-icon>
    </div>
    <div class="popUp-content">
      <div class="info-list">
        <div class="popUp-item" v-for="item in detailInfo" :key="item[0]">
          <div class="popUp-item-title">{{ item[0] }}</div>
          <div class="popUp-item-content">{{ item[1] }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { watch, onMounted, useTemplateRef, ref } from 'vue'
import selectedLocationIcon from '@/assets/icons/location-selected.svg'
import { Close } from '@element-plus/icons-vue'

const canSelect = defineModel()
const { map, queryResultLayer } = defineProps({
  map: {
    type: Object,
    required: true,
  },
  queryResultLayer: {
    type: Object,
    required: true,
  },
})

const detailInfo = ref([])
const statusText = ref(['待处理', '处理中', '已归档'])

const popUpEl = useTemplateRef('popUpEl')

let popup

// 设置select交互
const select = new ol.interaction.Select({
  layers: [queryResultLayer],
  style: new ol.style.Style({
    image: new ol.style.Icon({
      src: selectedLocationIcon,
      anchor: [0.5, 1],
      scale: 0.2,
    }),
  }),
})

select.on('select', (e) => {
  const feature = e.selected[0]
  if (feature) {
    const center = feature.getGeometry().getCoordinates()[0]
    popup.setPosition(center)
    const data = feature.getProperties().getProperties()
    console.log(data)
    detailInfo.value = [
      ['事件类型', data['事件类型']],
      ['事件等级', data['事件等级']],
      ['发生时间', data['发生时间']],
      ['发生地点', data['发生地点']],
      ['处理状态', statusText.value[data['处理状态']]],
    ]
  } else {
    closePopUp()
  }
})

const closePopUp = () => {
  popup.setPosition(undefined)
  detailInfo.value = []
}
watch(canSelect, (val) => {
  if (val) {
    select.setActive(true)
    map.addInteraction(select)
  } else {
    select.setActive(false) //重置select状态
    map.removeInteraction(select) //防止多个组件select互相干扰
    closePopUp() //关闭popup
  }
})

onMounted(() => {
  popup = new ol.Overlay({
    element: popUpEl.value, //模板渲染后绑定dom
    positioning: 'bottom-center',
    stopEvent: true,
  })
  map.addOverlay(popup)
})
</script>

<style lang="scss" scoped>
#select-popUp {
  position: relative;
  bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: #fff;
  }
  .popUp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #409eff;
    padding: 10px;
    color: #fff;
    border-radius: 5px 5px 0 0;
    .el-icon {
      height: 1.5rem;
      width: 1.5rem;
    }
  }
  .popUp-content {
    padding: 10px;
    color: #333;
    .info-list {
      border: 1px solid #e2e2e2;
      border-radius: 5px;
      .popUp-item {
        display: flex;
        border-bottom: 1px solid #e2e2e2;
        &:last-child {
          border-bottom: none;
        }
        & > div {
          padding: 0.4rem 0.8rem;
        }
        .popUp-item-title {
          border-right: 1px solid #e2e2e2;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
